<template>


  <div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="form.keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="primary" @click="toMyinvest">我的</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="investId"
          label="ID"
          width="120">
        </el-table-column>
        <el-table-column
          label="名称"
          width="140">
          <template slot-scope="scope">
            <span v-html="scope.row.investName"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="所属人"
          width="120"
          :formatter="formatteruserId">
        </el-table-column>
        <el-table-column
          prop="investPrice"
          label="金额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改日期"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">投资</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNum"
        :page-sizes="[3, 5, 10]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


    <el-dialog title="投资" :visible.sync="dialogFormVisible">
      <el-form :model="dform">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="dform.investName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="dform.investPrice" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="DAdd">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {list, selectbyproductid,update,insert,del} from "../../../api/invest/invest";

export default {
  name: "investList",
  data() {
    return {
      tableData: [],
      form: {
        keyWord: null,
        pageNum: 1,
        pageSize: 3
      },
      total: 0,
      dialogFormVisible: false,
      brand:{
        userId:'',
        productId:'',
      },
      dform: {
        productId: '',
        userId: '',
        investPrice: '',
        investId: '',
        investName: '',
      },
      formLabelWidth: '120px',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      list(this.form).then(rsp =>{
        this.tableData = rsp.data.list
        this.total = rsp.data.total
      })
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.dform = {}

      this.dform.userId = 1
      this.dform.productId = row.productId
      this.dform.investName = row.investName
      this.brand.userId = 1
      this.brand.productId = row.productId

      selectbyproductid(this.brand).then(rsp =>{
        if(rsp.msg=='失败'){
          this.dform.investId = row.investId
          this.$message("已投资过该产品")
        }else{
          this.dform.investId = ''
          this.$message("可以投资该产品")
        }
      })
    },
    handleDelete(index, row) {

      // del(row.id).then(response =>{
      //   this.getList()
      //   console.log(response)
      // })
    },
    DAdd(){

      if(this.dform.investId==''){
        this.$message("添加")
        insert(this.dform).then(rsp =>{
          this.dialogFormVisible= false
          this.getList()
        })
      }else{
        this.$message("修改")
        update(this.dform).then(rsp =>{
          console.log(rsp)
          this.dialogFormVisible= false
          this.getList()
        })
      }

    },
    formatteruserId(row,index){
      if(row.userId==1)return"123";
      if(row.userId==2)return"zhangsan";
      if(row.userId==3)return"lisi";
    },
    toMyinvest(){
      this.$router.push("/dingList")
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum = val
      this.getList()
    },
  },
}
</script>

<style scoped>

</style>
